<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <!-- 导入外部图标库的地址进行直接使用 -->
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- md5.js -->
    <script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <script th:inline="javascript">
        /*<![CDATA[*/
        $(document).ready(function() {
            setTimeout(function() {
                $('#msg').hide();
            }, 3000); // 3000 milliseconds = 3 seconds
        });
        /*]]>*/
    </script>

    <script>

        function setFormAction() {
            var form = document.getElementById('loginForm');
            var role = document.querySelector('input[name="t1"]:checked');
            if (role) {
                if (role.value === 'user') {
                    form.action = '/toUser';
                } else if (role.value === 'admin') {
                    form.action = '/toAdmin';
                }
            }
        }


        function checkRadioSelection(event) {
            var radios = document.querySelectorAll('input[name="t1"]:checked');
            if (radios.length === 0) {
                alert('请选择你登录的身份');
                event.preventDefault(); // 阻止表单提交
                return false; // 明确返回 false 也很重要
            }
            // 如果选择了一个单选框，则继续表单提交
            setFormAction();
            return true;
        }


    </script>

</head>


<!-- 中间整一个图标显示 -->
<body>
<div class="container">

    <div class="form-box login">
        <form  id="loginForm" th:action="@{/toLoginPage}" onsubmit="return checkRadioSelection();">
            <h1>登录账号</h1>
            <div class="input-box">
                <input type="text" placeholder="mobile" id="l_mobile" name="l_mobile"
                       required>
                <i class='bx bxs-user'></i>
            </div>
            <div class="input-box">
                <!-- placeholder是未输入时的背景提示 -->
                <input type="password" placeholder="password" id="l_password" name="l_password"
                       required>
                <i class='bx bxs-lock-alt'></i>
            </div>
            <p id="msg" th:text="${msg}" th:style="'color: red;'"></p>

            <div id="check">
                <input type="radio" name="t1" value="user" />客户

                <input type="radio" name="t1" value="admin" />管理员
            </div>
            <br><br>
            <div class="forgot-link">
                <a href="/login/retri.html">找回密码</a>
            </div>
            <button type="submit" class="btn">登录</button>
        </form>
    </div>

    <div class="form-box register">
        <form th:action="@{/registerUser}">
            <h1>注册</h1>
            <div class="input-box">
                <input type="text" placeholder="mobile" id="r_mobile" name="r_mobile"
                       required>
                <i class='bx bxs-user'></i>
            </div>
            <div class="input-box">
                <input type="text" placeholder="password" id="r_password" name="r_password"
                       required>
                <i class='bx bxs-user'></i>
            </div>

            <div class="input-box">
                <input type="text" placeholder="nickname" id="r_nickname" name="r_nickname"
                       required>
                <i class='bx bxs-user'></i>
            </div>


            <button type="submit" class="btn">确定</button>
        </form>

    </div>

    <div class="toggle-box">
        <div class="toggle-panel toggel-left">
            <h1>欢迎</h1>
            <p>未创建账号</p>

            <button class="btn register-btn">创建</button>

        </div>
        <div class="toggle-panel toggel-right">
            <h1>欢迎回来</h1>
            <p>已经拥有账号</p>
            <button class="btn login-btn">登录</button>
        </div>
    </div>
</div>
<script th:src="@{/js/script.js}">

</script>


</body>

</html>